水平居中布局

方法一：使用样式text-align: center;flex

方法二：使用样式margin: 0 auto;code

方法三：使用display: flex布局；orm

方法四：使用绝对定位的方式blog

.parent{

position: relative;

.child{

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

}

}

垂直居中：it

方法一：使用样式vertical-align: middle(须要是行内元素，每每伴随着display: inline-block; 同时每每须要对于存在多个子元素时生效，因此当只存在一个元素而又须要用这种方式实现效果时，每每须要使用伪元素:before :after)；io

方法二：使用display:flex布局；table

方法三：使用绝对定位的方式form

.parent{

position: relative;

.child{

position: absolute;

top: 50%;

left: 0;

transform: translateY(-50%);

}

}

水平垂直居中，除了以上几种方式的结合以外，还能够经过如下几种方法实现：class

方法一：使用display：table；display:table-cell;

方法二：使用display:flex布局

.box {

display: flex;

justify-content: center;

align-items: center;

}

平常笔记